<template>
	<div class="ddd">
		<button class="bbb" @click="Wang=!Wang">
		</button>
		<div class="masked" v-if="Wang" @click="Wang=!Wang">
			<div @click.stop="" class="share-alert">
				<div class="parent">
						<el-button @click="Wang=!Wang">
						<svg viewBox="0 0 24 24" role="img" aria-label="关闭" focusable="false"
						     style="height: 16px; width: 16px; display: block; fill: rgb(118, 118, 118);">
							<path d="m23.25 24c-.19 0-.38-.07-.53-.22l-10.72-10.72-10.72 10.72c-.29.29-.77.29-1.06 0s-.29-.77 0-1.06l10.72-10.72-10.72-10.72c-.29-.29-.29-.77 0-1.06s.77-.29 1.06 0l10.72 10.72 10.72-10.72c.29-.29.77-.29 1.06 0s .29.77 0 1.06l-10.72 10.72 10.72 10.72c.29.29.29.77 0 1.06-.15.15-.34.22-.53.22"
							fill-rule="evenodd"></path>
						</svg>
					</el-button>
					<div class="Hee">
						<div class="mt-4 font-weight-bold">
							爱彼迎旅行保障
						</div>
						<div>
							<h1 class="title">全方位保障计划 · 无忧出行</h1>
						</div>
					</div>
						<el-tabs v-model="activeName" @tab-click="handleClick">
    						<el-tab-pane label="安心房源保障" name="first"></el-tab-pane>
    						<el-tab-pane label="专业中文客服" name="second"></el-tab-pane>
    						<el-tab-pane label="旅行安全保障" name="third"></el-tab-pane>
 						</el-tabs>
					<div class="erwwma mt-3">
						<img src="../homm/01.png" alt="">
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "homms",
		data () {
			return {
				Wang: false
			}
		},
		methods: {}
	}
</script>

<style>
	.el-tabs__item{
		font-weight:bold !important;
	}
	.Hee{
		padding-bottom: 48px;
	}
	.ddd{
		position: relative;
	}
	div button {
		border: none;
	}
	.bbb{
		width: 270px;
		height: 60px;
    	opacity:0;
		position:absolute;
		top:0;
		left:0;
	}
	.masked {
		z-index: 10;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.75);

	}

	.share-alert {
		border-radius: 6px;
		z-index: 20;
		max-width: 1000px;
		height:700px;
		background-color: #fff;
		position: relative;
		margin: 0 auto;
		vertical-align: middle;
		top: 40%;
		margin-top: -254.5px;
	}

	.parent {
		padding: 20px;
		margin-left: 25px;
	}

	.parent h1 {
		margin-top: 20px;
	}

	.title {
		font-size: 24px;
		color: rgb(72, 72, 72);
	}

	.erwwma img {
		border: 1px solid rgb(235, 235, 235);
		width: 240px;
		height: 240px;
	}

	.btn-color {
		background-color: rgb(0, 132, 137);
		color: #ffffff;
		font-size: 16px;
	}
</style>
